<template>
    <div class="user">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @change="selects" @search="getList">
        </search-form>
        <elTable :formData="formData" @getList="getList">
                <el-table-column prop="name" label="用户名" align="center"></el-table-column>
                <el-table-column prop="group" label="用户组" align="center">
                    <template slot-scope="scope">
                        {{scope.row.group && scope.row.group.name || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="statusMessage" label="用户状态" align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.createTime && $normalTime(scope.row.createTime) || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="loginTime" label="登录时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.loginTime && $normalTime(scope.row.loginTime) || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="deleteUser(scope.row)" v-if="false">删除</el-button>
                        <el-button type="text" @click="clock(scope.row)">{{scope.row.status == -1 ? '解锁' : '锁定'}}</el-button>
                        <el-button type="text"  @click="goDetail(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
        </elTable>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import { mapGetters } from 'vuex'
export default {
    name: 'settingUser',
    components: {
        elTable
    },
    data () {
        return {
            formData: {
                currentPage: 1,
                pageSize: 10,
                data: [
                ],
                total: 0
            },
            searchObj: {
                phone: '',
                name: '',
                groupId: '',
                status: '',
                roleId: ''
            },
            form: {
                name: ''
            },
            visible: {
                show: true
            },
            searchArray: [
                {
                    type: "input",
                    placeholder: "请输入",
                    types: "text",
                    value: "",
                    label: "手机号",
                    key: 'phone'
                },
                {
                    type: "input",
                    placeholder: "请输入",
                    types: "text",
                    value: "",
                    label: "登录账号",
                    key: 'name'
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '登录状态',
                    key: 'status',
                    list: [
                    ]
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '用户组',
                    key: 'groupId',
                    needChange: true,
                    list: [
                
                    ]
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '角色',
                    key: 'roleId',
                    list: [
                        // {
                        //     label: "1号商城",
                        //     value: "1"
                        // },
                        // {
                        //     label: "2号商城",
                        //     value: "2"
                        // }
                    ]
                },
            ],
            roleList: [
                {
                    "id": 2,
                    "createTime": 1602052847000,
                    "name": "系统管理员1",
                    "store": 1
                }
            ]
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        this.getList()
        this.init()
    },
    mounted () {
    },
    methods: {
        init () {
            this.$set(this.searchArray[3], 'list', this.enumAll.UserGroup || [])
            this.$set(this.searchArray[2], 'list', this.enumAll.UserStatus || [])
        },
        getTime (t) {
            return this.$moment(new Date(parseInt(t))).format('YYYY-MM-DD HH:mm:ss')
        },
        // 选择用户组需要 角色进行联动
        selects (item) {
            this.searchObj.roleId = ''
            this.$set(this.searchArray[4], 'value', '')
            if (item.key == 'groupId') {
                this.getRoleList(item.value)
            }
        },
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {formData: {currentPage, pageSize}, searchObj} = this
            let param = {}
            param = {
                currentPage,
                pageSize
            }
            for ( let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.userManage.getUserList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
        deleteUser (item) {
            this.$confirm('确定要删除该用户么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$api.userManage.deleteUser({id: item.id}).then(r => {

                    })
                }).catch(() => {
                       
            })
        },
        clock (item) {
            this.$confirm(`您确定要${item.status == -1 ? '解锁' : '锁定'}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let param = {}
                    param = {
                        id: item.id,
                        status: item.status == -1 ? 0 : -1
                    }
                    this.$api.userManage.putChangeStatus(param).then(r => {
                        this.getList()
                    })
                }).catch(() => {
            })
        },
        goDetail (item) {
            this.$router.push({
                path: `/userManage/user/detail/${item.id}`
            })
        },
        // 获取用户组
        getUserGroupList () {
            this.$api.userManage.getUserGroupList().then(r => {

            })
        },
        // 获取角色列表
        getRoleList (groupId) {
            let param = {}
            param = {
                groupId,
                store: 1
            }
            this.$api.common.getRoleAllList(param).then(r => {
                let item = this.searchArray[4]
                item.list = 
                item.list = r.data && r.data.length &&  r.data.map(r => {
                    return {
                        label: r.name,
                        value: r.id
                    }
                })
                this.$set(this.searchArray, 4, item)
                    this.$set(this.searchArray, 4, item)
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.user {
    .search-form {
        margin-bottom: 15px;
    }
}
</style>